<template>
    <div class="all">
        <div class="title">{{ $st('wp-ji-ben-xin-xi') }}</div>
        <div class="card">
            <line-cell
                :listSetProps="baseprops"
                :listData="customerInfo">
            </line-cell>
        </div>
        <div class="title">{{ $st('wp-zi-ding-yi-xin-xi') }}</div>
        <div
            v-if="customizeprops.length > 0"
            class="card">
            <line-cell
                :listSetProps="customizeprops"
                :listData="customizeInfo">
            </line-cell>
        </div>
    </div>
    <div class="button-div-fixed">
        <van-button
            class="btn"
            @click="deleteCustomer">
            {{ $st('wp-shan-chu') }}
        </van-button>
        <van-button
            class="btn"
            @click="toPage('/newCustomer?type=edit&customer_id=' + $route.query.customer_id)">
            {{ $st('wp-bian-ji') }}
        </van-button>
        <van-button
            class="btn"
            type="primary"
            @click="toNewRepair()">
            {{ $st('wp-bao-xiu') }}
        </van-button>
    </div>
</template>
<script>
import { selfI18n } from '@/i18n/index';
import { useRoute, useRouter } from 'vue-router';
import { reactive, toRefs, onMounted } from 'vue';
import LineCell from '@/components/_common/LineCell.vue';
import useCustomerManageSetup from '@/setup/workbench/CustomerManageSetup.js';
import { showSuccess, showConfirm } from '@/util/MessageDeal';

export default {
    components: {
        LineCell
    },
    setup (props, ctx) {
        const $st = selfI18n;
        const route = useRoute();
        const router = useRouter();

        const { getCustomrecordOne, delCustomrecordOne, getCustomrosterCustomparams } = useCustomerManageSetup();

        const state = reactive({
            customerInfo: {},
            baseprops: [{
                id: 'customer_id',
                label: $st('wp-ke-hu-id')
            }, {
                id: 'customer_name',
                label: $st('wp-ke-hu-ming-cheng')
            }, {
                id: 'region',
                label: $st('wp-suo-zai-qu-yu'),
                formatter: (item) => {
                    return item.region ? item.region.country + item.region.province + item.region.city : '';
                }
            }, {
                id: 'mainbusiness',
                label: $st('wp-zhu-ying-ye-wu')
            }, {
                id: 'contactperson',
                label: $st('wp-ke-hu-lian-xi-ren')
            }, {
                id: 'contactway',
                label: $st('wp-shou-ji-hao')
            }, {
                id: 'address',
                label: $st('wp-lian-xi-di-zhi')
            }, {
                id: 'location',
                label: $st('wp-ding-wei')
            }, {
                id: 'contactaccount',
                label: $st('wp-yun-zhang-hao')
            }, {
                id: 'seller_account',
                label: $st('wp-wei-bao-fu-ze-ren'),
                type: 'label-btn',
                formatter: (item) => {
                    return item.seller_name ? item.seller_account + ' (' + item.seller_name + ')' : item.seller_account;
                }
            }, {
                id: 'remark',
                label: $st('wp-bei-zhu')
            }],
            customizeprops: [],
            customizeInfo: {}
        });

        // 获取客户详情
        const getCustomrecordDetail = () => {
            getCustomrecordOne({
                customer_id: route.query.customer_id
            }).then((data) => {
                state.customerInfo = data.value;
                data.value.customparams && data.value.customparams.forEach((item) => {
                    state.customizeInfo[item.md5name] = item.value;
                });
            });
        };

        // 获取自定义参数
        const getCustomParams = () => {
            getCustomrosterCustomparams().then((data) => {
                state.customizeprops = data.value.map((item) => {
                    const obj = {
                        id: item.md5name,
                        label: item.originname
                    };
                    return obj;
                });
            });
        };

        // 跳转其他页面
        const toPage = (path) => {
            router.push(path);
        };

        const deleteCustomer = () => {
            if (route.query.customer_id) {
                showConfirm($st('wp-que-ding-shan-chu-ci-ke-hu'), () => {
                    delCustomrecordOne({
                        customer_id: route.query.customer_id
                    }).then((data) => {
                        showSuccess($st('wp-shan-chu-cheng-gong'));
                        toPage('/customerManage');
                    });
                });
            }
        };

        const toNewRepair = (item) => {
            router.push({
                name: 'createrepairorder',
                params: {
                    customer_id: route.query.customer_id
                }
            });
        };

        onMounted(() => {
            if (route.query.customer_id) {
                getCustomParams();
                getCustomrecordDetail();
            }
        });

        return {
            ...toRefs(state),
            toPage,
            toNewRepair,
            deleteCustomer
        };
    }
};
</script>
<style scoped lang="scss">
.all {
    padding: 0 15px 63px;
    .title {
        padding: 15px 0;
    }
    .card {
        border-radius: 12px;
        background-color: #fff;
        padding: 15px 15px 15px;
    }
}
.button-div-fixed {
    position:fixed;
    padding: 7px 15px;
    bottom: 0;
    background-color: #fff;
    height: 53px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    .btn {
        height: 40px;
        flex: 1;
        margin-right: 10px;
        border-radius: 4px;
        &:last-child {
            margin-right: 0;
        }
    }
}
</style>
